<template>
  <div class="row-start-center py-[15px] text-[14px] border-bottom text-[#444] px-[15px]">
    <div class="w-[25%] break-all box-border px-[4px]">
      <div>{{ item.LotteryName }}</div>
      <div class="text-[#888]">{{ item.Cat1 }}</div>
    </div>
    <div class="w-[25%] text-center break-all box-border px-[4px]">{{ item.Count || "--" }}</div>
    <div
      class="w-[25%] text-center box-border px-[4px]"
      :class="{
        'text-red': item.Amount < 0,
        'text-blue': item.Amount > 0
      }"
    >
      {{ formatCurrency(item.Amount) }}
    </div>
    <div
      class="w-[25%] text-center box-border px-[4px]"
      :class="{
        'text-red': item.WinAmount < 0,
        'text-blue': item.WinAmount > 0
      }"
    >
      {{ formatCurrency(item.WinAmount) }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { formatCurrency } from "@/utils/common";

withDefaults(
  defineProps<{
    item: ClassifyMo;
  }>(),
  {}
);
</script>
